<template>
    <van-nav-bar title="地址管理" left-text="返回" left-arrow @click-left="router.go(-1)" />

    <van-address-list v-model="userid" :list="myList" default-tag-text="默认" @add="onAdd" @edit="onEdit" />


    <!-- 弹出层 新增地址-->
    <van-popup v-model:show="show" :style="{ padding: '64px' }">
        <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result :address-info="addressInfo"
            :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
            @delete="onDelete" @change-detail="onChangeDetail" />
    </van-popup>
</template>

<script setup lang="ts">

import { ref, onMounted, reactive } from 'vue';
import { showToast } from 'vant';
import { getAddressList, getAddAddress, updateAddress, deleteAddress, getAdd,queryAddress } from '@/api/address'
import { areaList } from '@vant/area-data';

import { useRouter } from 'vue-router';
const router = useRouter()

const userid = ref(localStorage.getItem('userid'))

const flag = ref(false)
const chosenAddressId = ref('1');

const list = ref([])    // 接口有数据就用这个list变量

// 静态数据  如果接口没有数据 myList 就用 initAddres
let initAddres = [
    {
        address: '山东省运城市稷山县123',
        addressDetail: '123',
        addressid: 'address_7bbc1749-87df-40e9-8f6f-e66bea85d479',
        city: '运城市',
        county: '稷山县',
        id: undefined,
        isDefault: false,
        name: '张三丰',
        province: '山西省',
        tel: '12345678909',
        userid: 'user_2d4f9821-9716-4147-98db-748ad0c45e8f',
    },
]

// const myList = ref(JSON.parse(localStorage.getItem('address')) || initAddres)
const myList = ref([]|| initAddres)

/*   接口初始化函数  如果接口有数据就用这个  initAddressList 函数
// 两种写法  获取接口数据
//  1. async  await语法 
// onMounted(async () => {
//     let res = await getAddressList({ userid: userid.value })
//     // console.log(res,444444444444);  
//     // 需要组装数据
//     res.data.forEach(item => {
//         // 对每个item 增加 id  跟 address 字段  vant 组件需要用到这个两个字段

//         item.id = item.userid
//         item.address = item.province + item.city + item.county + item.addressDetail
//     });

//     console.log(res.data, 99999999);  //添加完 id 和 address 后的数据
//     list.value = res.data;   // 赋值给list
// })
*/

//  2. promise  语法
//     getAddressList({ userid:userid.value }).then((res)=>{ 做一些操作 })
const initAddressList = () => {  //获取接口的数据并 赋值给myList
    getAddressList({ userid: userid.value }).then((res) => {
        console.log(res.data,1111111111);  //res 是返回的数据
        
        res.data.forEach((item) => {
            // 对每个item 增加 id  跟 address 字段  vant  组件需要用到这个两个字段
            item.id = item.addressid   //对数据进行一些处理，让id变成独一无二
            item.address = item.province + item.city + item.county + item.addressDetail
        })
        // console.log(res.data,2222) // 添加完 id 跟 address 后的数据
        // list.value = res.data // 赋值给  list 
        myList.value = res.data // 赋值给  myList 
    })
}

onMounted(() => {
    initAddressList()    //获取接口的数据并 赋值给myList
})

// 本地缓存初始化函数， 接口没有数据，就用 myAddressInit方法
const myAddressInit = () => {
    let allAddress = JSON.parse(localStorage.getItem('address')) || []
    myList.value = allAddress
}

const isAdd = ref(false)  // 判断是 新增地址(true) 还是编辑地址(false)
const show = ref(false)   // 定义弹框 是否显示

const onAdd = () => {
    showToast('新增地址');
    flag.value = true
    // router.push('/address/edit') //路由跳转
    show.value = true
    isAdd.value = true
}

const addressInfo = ref({})

const onEdit = (item, index) => {
    showToast('编辑地址:' + index);
    show.value = true
    isAdd.value = false   // 编辑地址(false)
    // console.log('item', item,'index',index);
    addressInfo.value = item
}

// 新增的按钮
// 1 发送请求
// 2  成功后关闭
// 3  重新获取用户的地址
// 4 地址展示

// 新增地址
const onSave = (val) => {

    // 新增地址的逻辑
    if (isAdd.value == true) {
        let data = {
            ...val,
            userid: userid.value
        }
        // 获取接口数据  getAdd 方法
        // getAdd(data).then((res)=>{
        //     console.log('add',res,5555555555555);
        //     show.value = false
        //     initAddressList()   //获取接口的数据并 赋值给myList  
        // })

        // 如果接口有问题没有数据 就用本地缓存方法
        setTimeout(() => {
            let allAddress = [...myList.value, data]
            localStorage.setItem('address', JSON.stringify(allAddress))
            show.value = false
            myAddressInit()  // 获取本地数据 并且赋值给myList
        }, 1000)

    } else {
        let data = {
            ...val,
            userid: userid.value
        }

        // 编辑地址的逻辑
        updateAddress(data).then((res) => {
            console.log('update', res);
            show.value = false

            // let allAddress = [...myList.value, data]            
            // localStorage.setItem('address', JSON.stringify(allAddress))
            // myAddressInit()  // 获取本地数据 并且赋值给myList;  缺点：修改不了

            initAddressList()  //获取接口的数据并 赋值给myList

        })
    }
    showToast('编辑完毕');

}

const onDelete = (val) => {
    showToast('delete');
    // console.log(val.addressid,44444444444)

    deleteAddress({ addressid: val.addressid }).then((res) => {
        console.log('delete', res);

        show.value = false
        initAddressList()  //获取接口的数据并 赋值给myList
    })
}

const searchResult = ref([]);

const onChangeDetail = (val) => {}

// onMounted(() => {
//     queryAddress({ userid: userid.value }).then((res) => {
//         console.log('queery', res)
//     })
// })

</script>
<style></style>